<template>
    <div class="small-nav" >
        <div v-for="i in navlist">
            <div class="clearfix small-top" >
                <img src="../../assets/commodity/sale.png" alt="" v-if="i.type===1">
                <img src="../../assets/commodity/hot.png" alt="" v-if="i.type===0">
                <span>{{i.title}}</span>
                <p><span>{{i.text}}</span><span>{{i.text1}}</span><span v-if="i.type===1" class="next">{{i.text2}}</span></p>
            </div>
            <special-sale v-if="i.type===1" :salelist="salelist"></special-sale>
            <diary-column v-if="i.type===0" v-on:childevent='wathChildEvent'></diary-column>
            <sale-option v-if="i.type===0"></sale-option>
            <product-reservation v-if="i.type===0" :movieList="List"></product-reservation>
        </div>
    </div>
</template>

<script>
    import SpecialSale from '../../components/Commodity/SpecialSale'
    import DiaryColumn from '../../components/DiaryColumn'
    import ProductReservation from '../../components/ProductReservation/index.vue'
    import SaleOption from "../../components/Commodity/SaleOption"
    export default {
        name: "SmallNav",
        props:['navlist','List','salelist'],
        components :{
            SpecialSale,
            DiaryColumn,
            ProductReservation,
            SaleOption
        },
        created () {

        },
        methods :{
            wathChildEvent:function(vals){//直接监听 又子组件触发的事件，参数为子组件的传来的数据
                // console.log(vals);//结果：这是子组件的数据，将有子组件操作触发传给父组件
                this.$emit('childevent',vals);
                console.log(vals)
            }
        }
    }

</script>

<style scoped lang="less">
    @import "../../style/style";
    .small-nav{
        margin-top: 25px;
            .small-top{
            padding-bottom: 5px;
            border-bottom: 2px solid @theme-color-dark;
            margin-bottom: 25px;
            >span{
                line-height: 30px;
                font-size: 26px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: @theme-color-dark;
                vertical-align: top;
                margin-top: 20px;
                float: left;
                padding-left: 10px;
                border-right: 2px solid @theme-color-dark;
                padding-right: 20px;
            }
            >img{
                margin-top: 10px;
                float: left;
            }
            p{
                float: left;
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: @theme-color-dark;
                padding-top: 25px;
                width: 85%;
                span{
                    padding-left: 17px;
                }
                .next{
                    float: right;
                    display: block;
                }
            }

        }

    }
</style>